<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from "vue"

	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	import {
		back,
		getSex
	} from '@/utils/common'

	import {
		useStore
	} from "@/stores/index"
	const userStore = useStore()


	// import http from "@/api/libraryAPI"
	import http from "@/api/roomAPI"

	const data = reactive({
		id: 0,
		imgList: [],
		showImg: false,
		imgSrc: "",
		urls: [],
		private: 0,
		userInfo: userStore.user.userInfo,
	})

	onLoad(async (options) => {
		data.id = +options.id;

		data.private = +options.private

		const res1 = await http.getGroupPicture(data.id)
		data.imgList = res1.data;

		// data.imgList.forEach((item) => {
		// 	data.urls.push(item.url);
		// })
	})

	const previewImage = ref(null);
	//预览图片
	function preview(src) {
		// const urls = [];


		data.imgSrc = src;

		nextTick(() => {
			// previewImage.value.open(src); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)

			data.showImg = true;
		})

		// uni.previewImage({
		// 	current: urls[index],
		// 	urls: urls,
		// 	showmenu: false,
		// 	indicator: "number"
		// })


	}

	function beforeleave() {
		data.showImg = false
	}
</script>

<template>
	<view>
		<uni-header />
		<view class="header">
			<!-- <image class="back" @click="back" src="@/static/icon/back.png" mode="aspectFit" /> -->
			<uni-icons class="back" @click="back" type="back" size="24" color="#000"></uni-icons>
			<view class="avatar">
				<image src="@/static/icon/gift.png" mode="aspectFit" />
				<text class="name">资料列表</text>
			</view>
			<view style="width: 90rpx;">

			</view>
		</view>

		<view class="summary">
			<text>IVMCR整体专属定制方案</text>
		</view>
		<view class="summary">
			<text>IVMCR Overall Exclusive Customization Plan</text>
		</view>
		<view v-if="data.private>0" style="text-align: center;font-size: 17rpx;">{{data.userInfo.realname}}
			{{getSex(data.userInfo.sex)}} 专属定制方案
		</view>

		<view class="box">
			<view class="pic" v-for="(item,index) in data.imgList" :key="index">
				<image class="upload-img" mode="aspectFit" :src="item.url" lazy-load @click="preview(item.url)">
				</image>
			</view>
		</view>

		<!-- <q-previewImage ref="previewImage" :urls="data.urls"></q-previewImage> -->

		<view v-if="data.showImg">
			<page-container :show="data.showImg" @beforeleave="beforeleave">
				<q-previewImage ref="previewImage" :urls="[data.imgSrc]" @close="beforeleave"></q-previewImage>
			</page-container>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 33rpx;

		.back {
			// position: absolute;
			// top: 20rpx;
			// padding-left: 36rpx;
			width: 90rpx;
			text-align: center;
			// width: 18rpx;
			// height: 18rpx;
		}

		.avatar {
			display: flex;
			align-items: center;
			justify-content: center;
			// flex-direction: column;

			>image {
				width: 124rpx;
				height: 64px;
			}

			.name {
				padding-left: 36rpx;
				color: rgb(124, 124, 124);
				font-size: 20rpx;
				font-weight: 600;
				line-height: 30rpx;
				text-align: center;
			}
		}
	}

	.summary {
		text-align: center;
		font-size: 16rpx;
		color: #7c7c7c;
	}

	.box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		column-gap: 56rpx;
		row-gap: 47rpx;
		padding: 0 100rpx;
		margin-top: 77rpx;
		width: 100%;

		.pic {
			position: relative;
			width: 143rpx;
			height: 241rpx;
			background: rgb(217, 217, 217);

			.upload-img {
				width: 100%;
				height: 100%;
				border-radius: 8upx;
			}

			.upload-del-btn {
				position: absolute;
				right: -16upx;
				top: -14upx;
				width: 36upx;
				height: 36upx;
				border: 4upx solid #fff;
				border-radius: 100px;
			}
		}
	}
</style>